<template>
	<view id="he">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	*{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	#he{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* width: 100%; */
		display: flex;/*弹性盒模型*/
		justify-content: center;/*主轴方向居中显示*/
		align-items: center;/*交叉轴方向居中显示*/
		background-color: rgba(255, 255, 255);
		z-index: 99999;
	}
	ul{
		height: 200px;
	}
	li{
		float: left;
		width: 10px;
		height: 10px;
		border-radius: 10px;
		margin-right: 5px;
	}
	li:nth-child(1){
		background-color: #f62e74;
		animation: love1 3s infinite;
	}
	li:nth-child(2){
		background-color: #f45330;
		animation: love2 3s infinite;
		animation-delay: 0.15s;
	}
	li:nth-child(3){
		background-color: #ffc883;
		animation: love3 3s infinite;
		animation-delay: 0.3s;
	}
	li:nth-child(4){
		background-color: #30d268;
		animation: love4 3s infinite;
		animation-delay: 0.45s;
	}
	li:nth-child(5){
		background-color: #006cb4;
		animation: love5 3s infinite;
		animation-delay: 0.6s;
	}
	li:nth-child(6){
		background-color: #784697;
		animation: love4 3s infinite;
		animation-delay: 0.75s;
	}
	li:nth-child(7){
		background-color: #ffc883;
		animation: love3 3s infinite;
		animation-delay: 0.9s;
	}
	li:nth-child(8){
		background-color: #f45330;
		animation: love2 3s infinite;
		animation-delay: 1.05s;
	}
	li:nth-child(9){
		background-color: #f62e74;
		animation: love1 3s infinite;
		animation-delay: 1.3s;
	}
	@keyframes love1{
		30%,50%{height: 30px; transform: translateY(-15px);}
		75%,100%{height: 10px; transform: translateY(0);}
	}
	@keyframes love2{
		30%,50%{height: 62.5px; transform: translateY(-31.25px);}
		75%,100%{height: 10px; transform: translateY(0);}
		
	}
	@keyframes love3{
		30%,50%{height: 80px; transform: translateY(-37.5px);}
		75%,100%{height: 10px; transform: translateY(0);}
	}
	@keyframes love4{
		30%,50%{height: 90px; transform: translateY(-30px);}
		75%,100%{height: 10px; transform: translateY(0);}
	}
	@keyframes love5{
		30%,50%{height: 95px; transform: translateY(-22.5px);}
		75%,100%{height: 10px; transform: translateY(0);}
	}
</style>
